<template>
  <div class="pagination">
    <button :disabled="currentPage <= 1" @click="prevPage" class="page-button">上一页</button>
    <button :disabled="isNextDisabled" @click="nextPage" class="page-button"> 下一页 </button>
  </div>
</template>

<script setup>
  import { computed } from 'vue'

  // 解构 props
  const props = defineProps({
    currentPage: {
      type: Number,
      required: true,
    },
    // 上次请求返回的数据数目
    lastResponseSize: {
      type: Number,
      required: true,
    },
    // 每页条目数
    itemsPerPage: {
      type: Number,
      default: 10,
    },
    // 总条目数
    totalItems: {
      type: Number,
      required: true,
    },
  })

  // 定义 emit 函数
  const emit = defineEmits(['update:currentPage'])

  // 计算是否有下一页
  const isNextDisabled = computed(() => {
    // 如果上次请求返回的数据数目少于每页条目数，则禁用下一页按钮

    return props.lastResponseSize < props.itemsPerPage
  })

  // 上一页的方法
  const prevPage = () => {
    if (props.currentPage > 1) {
      emit('update:currentPage', props.currentPage - 1)
    }
  }

  // 下一页的方法
  const nextPage = () => {
    if (!isNextDisabled.value) {
      emit('update:currentPage', props.currentPage + 1)
    }
  }
</script>

<style scoped>
  .pagination {
    display: flex;
    gap: 8px; /* 按钮之间的间距 */
    margin-top: 20px; /* 与上方元素的距离 */
    justify-content: right;
    padding-right: 50px;
  }

  .page-button {
    background-color: #08979c; /* 绿色背景 */
    border: none;
    color: white;
    padding: 4px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px; /* 圆角 */
    box-shadow: 0 4px 8px rgb(0 0 0 / 20%); /* 阴影 */
    transition:
      background-color 0.3s,
      transform 0.2s; /* 过渡效果 */
  }

  .page-button:hover:not(:disabled) {
    background-color: #08979c; /* 鼠标悬停时的颜色 */
    transform: translateY(-2px); /* 鼠标悬停时稍微上升 */
  }

  .page-button:active:not(:disabled) {
    background-color: #08979c; /* 按下时的颜色 */
    transform: translateY(1px); /* 按下时的效果 */
  }

  .page-button:disabled {
    background-color: #ddd; /* 禁用状态下的颜色 */
    cursor: not-allowed;
    box-shadow: none;
  }
</style>
